import './DiscoverModule.scss'
import React, { Component } from 'react'
import { Breadcrumb, Carousel  } from 'antd';
import { Link } from 'react-router-dom';
import { getPersonalized, getTopAlbum, getToplist, getDjPopular, getToplistDetail,getPopSinger } from '../../../api/index'
function TitleContainer (props) {
  return (
    <div className='title_container'>
      <div className="title_left">
        <span className="icon" />
        <span className='title_name'>{props.title}</span>
        {props.children}
      </div>
      <div className="title_right">
        更多右箭头 <span className='iconfont icon-web__bitebiyoujiantou'></span>
      </div>
    </div>
  )
}

export default class DiscoverModule extends Component {
  constructor () {
    super()
    this.newMusic = React.createRef()
    this.state = {
      popRecommendation:[],//热门推荐列表
      newDiscLists:[],//新碟上架
      rankLists:[],//榜单
      popSingerLists:[],//热门歌手
      djPopularLists:[],
    }
  }
  componentDidMount () {
    // 热门推荐接口
    getPersonalized().then(({data})=>{
      let popRecommendation = []
      popRecommendation = data.result.slice(0,8);
      this.setState({ popRecommendation })
    })
    getTopAlbum().then(({data})=>{
      let newDiscLists = []
      newDiscLists = data.weekData.slice(0, 10)
      this.setState({ newDiscLists })
    })
    getToplist().then(({data})=>{
      let rankLists = []
      getToplistDetail({id:data.list[0].id}).then((res)=>{
        let temp = {}
        temp.coverImgUrl = res.data.playlist.coverImgUrl
        temp.name = res.data.playlist.name
        temp.list = res.data.playlist.tracks.slice(0,10)
        rankLists.splice(0,0,temp)
        this.setState({rankLists})
      })
      getToplistDetail({id:data.list[1].id}).then((res)=>{
        let temp = {}
        temp.coverImgUrl = res.data.playlist.coverImgUrl
        temp.name = res.data.playlist.name
        temp.list = res.data.playlist.tracks.slice(0,10)
        rankLists.splice(1,0,temp)
        this.setState({rankLists})
      })
      getToplistDetail({id:data.list[2].id}).then((res)=>{
        let temp = {}
        temp.coverImgUrl = res.data.playlist.coverImgUrl
        temp.name = res.data.playlist.name
        temp.list = res.data.playlist.tracks.slice(0,10)
        rankLists.splice(2,0,temp)
        this.setState({rankLists})
      })
    })
    // 获取热门歌手
    getPopSinger().then(({data})=>{
      this.setState({
        popSingerLists:data.artists
      })
    })
    // 热门主播
    getDjPopular().then(({data})=>{
      console.log('data====',data)
      this.setState({
        djPopularLists:data.data.list
      })
    })
  }
  changeSwiper (type) {
    if(type === 0) {
      this.newMusic.current.prev()
    }else {
      this.newMusic.current.next()
    }
  }
  render() {
    let { popRecommendation, newDiscLists, djPopularLists, rankLists, popSingerLists } = this.state
    return (
      <div id='discover_module'>
        <div className="left_box">
          <TitleContainer title='热门推荐'>
            <Breadcrumb separator="|">
              <Breadcrumb.Item href="">华语</Breadcrumb.Item>
              <Breadcrumb.Item href="">流行</Breadcrumb.Item>
              <Breadcrumb.Item href="">摇滚</Breadcrumb.Item>
              <Breadcrumb.Item href="">民谣</Breadcrumb.Item>
              <Breadcrumb.Item href=""> </Breadcrumb.Item>
            </Breadcrumb>
          </TitleContainer>
          <div className="left_module1">
            {
              popRecommendation.map((item)=>{
                return (
                  <div className="item" key={item.id}>
                    <Link to='/my' className="image_box">
                      <img src={item.picUrl} alt="" />
                      <div className="img_info">
                        <div className="hot">
                          <span className='iconfont icon-erjiheadphones31'></span>
                          {item.trackCount}万
                        </div>
                        <div className="play_icon">
                          <span className='iconfont icon-bofang'></span>
                        </div>
                      </div>
                    </Link>
                    <Link to='/my' className="text">{item.name}</Link>
                  </div>
                )
              })
            }
            
          </div>
          <div className="left_module2">
            <TitleContainer title='新碟上架' />
            <div className="module_box">
              <div className="btn_pre btn_change" onClick={this.changeSwiper.bind(this,0)}><span className='iconfont icon-arrow-'></span></div>
              <div className="swiper_box">
                <Carousel ref={this.newMusic} slidesPerRow='5' dots={false}>
                  {
                    newDiscLists.map((item)=>{
                      return (
                        <div key={item.id}>
                          <div className="swiper_item">
                            <div className="img_box">
                              <img src={item.blurPicUrl} alt="" />
                              <span className="iconfont icon-bofang"></span>
                            </div>
                            <div className="name">{item.name}</div>
                            <div className="author">{item.artist.name}</div>
                          </div>
                        </div>
                      )
                    })
                  }
                </Carousel>
              </div>
              <div className="btn_next btn_change" onClick={this.changeSwiper.bind(this,1)}><span className='iconfont icon-youjiantou1'></span></div>
            </div>
          </div>  
          <div className="left_module3">
            <TitleContainer title='榜单' />
            <div className="module_box">
              {
                rankLists.map((item,i)=>{
                  return (
                    <div key={i} className="box_item">
                      <div className="head_box">
                        <img src={item.coverImgUrl} alt="" />
                        <div className="head_right">
                          <div className="name">{item.name}</div>
                          <div className="icons">
                            <span className="iconfont icon-bofang"></span>
                            <span className="iconfont icon-tianjiawenjian"></span>
                          </div>
                        </div>
                      </div>
                      {
                        item.list.map((citem,ci)=>{
                          return(
                            <Link to={`/discover/song/${citem.id}`} key={citem.id} className="line_box">
                              <div className="num" style={{color:(ci<3?'red':'')}}>{ci+1}</div>
                              <div className="name">{citem.name}</div>
                            </Link>
                          )
                        })
                      }
                     
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
        <div className="right_box">
          <div className="login_box">
            <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
            <div className="logo_btn needLogin">用户登录</div>
          </div>
          <div className="r_singer">
            <div className="r_title">
              <div className="text">入驻歌手</div>
              <div className="more">查看全部{'>'}</div>
            </div>
            <div className="singer_lists">
              {
                popSingerLists.map((item)=>{
                  return (
                    <div key={item.id} className="item">
                      <img src={item.img1v1Url} alt="" />
                      <div className="name_box">
                        <div className="name">{item.name}</div>
                        <div className="senfen">{item.alias[0]}</div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </div>
          <div className="apply_btn">申请成为网易音乐人</div>
          <div className="r_dj">
            <div className="r_title">
              <div className="text">入驻歌手</div>
            </div>
            <div className="dj_lists">
              {
                djPopularLists.map((item)=>{
                  return (
                    <div key={item.id} className="item">
                      <img src={item.avatarUrl} alt="" />
                      <div className="name_box">
                        <div className="name">{item.nickName}</div>
                        <div className="senfen">{item.mainAuthDesc}</div>
                      </div>
                    </div>
                  )
                })
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}
